<%--
  Created by IntelliJ IDEA.
  User: 码之泪殇
  Date: 2020-08-19
  Time: 16:39:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<html>
<head>
    <title>YqMedia - Home</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/static/css/admin.css" media="all">
    <script type="text/javascript" src="${path}/static/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">照片</label>
        <div class="layui-input-block">
            <!-- 上传按钮 -->
            <button type="button" class="layui-btn" id="uploadPic">
                <i class="layui-icon">&#xe67c;</i>选择图片
            </button>
            <br>
            <br>　　　
            <button type="button" class="layui-btn layui-btn-warm" id="uploadPicBtn">开始上传</button>
            　　　　<!-- 隐藏的input,一个隐藏的input（用于保存文件url） -->
            　　　　<input type="hidden" id="img_url" name="img" value=""/>
            　　　　<!-- 预览区域 -->
            <div class="layui-upload-list">
                　　　　　　<img class="layui-upload-img" width="100px" height="80px" id="preShow"/>
                　　　　　　<p id="demoText"></p>
                　　　　
            </div>
            　　
        </div>
    </div>
    <div class="layui-form-item">
        　　<label class="layui-form-label">视频</label>
        　　　　
        <div class="layui-input-block">
            　　　　<!-- 上传按钮 -->
            <!-- <input type="file" name="file2" lay-type="video" class="layui-upload-file">  -->
            <button type="button" class="layui-btn" id="uploadVideo"><i class="layui-icon"></i>上传视频</button>
            <button type="button" class="layui-btn layui-btn-warm" id="uploadVideoBtn">开始上传</button>
            <!-- 隐藏的input,一个隐藏的input（用于保存文件url） -->
            <input type="hidden" id="video_url" name="video" value=""/>
            　　
        </div>
    </div>
</div>
<script>
    layui.use('upload', function () {
        var upload = layui.upload, $ = layui.jquery;
        //上传图片
        var uploadInst = upload.render({
            elem: '#uploadPic' //绑定元素
            , url: '${path}/upload' //上传接口 [[@{/upload/img}]]
            , auto: false
            , bindAction: '#uploadPicBtn'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#preShow').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code == 0) {
                    alert("上传失败" + res.data.src);
                    return layer.msg('上传失败');
                }
                //上传成功
                alert("上传成功" + res.data.url);
                document.getElementById("img_url").value = res.data.url;
                return layer.msg('上传成功');
            }
            , error: function () {
                /*date_default_timezone_set("Asia/Shanghai");
               //演示失败状态，并实现重传
                 var dd=res.responseText.replace(/<\/?.+?>/g,"");
               var text=dd.replace(/ /g,"");//去掉所有空格
               o.msg("请求上传接口出现异常"+text),
              console.log(text);
               m(e) */

                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //上传视频
        var uploadInst = upload.render({
            elem: '#uploadVideo'
            , url: '${path }/upload'
            , accept: 'video' //视频
            , done: function (res) {
                console.log(res)
                //如果上传失败
                if (res.code == 0) {
                    alert("上传失败" + res.msg);
                    return layer.msg('上传失败');
                }
                //上传成功
                alert("上传成功" + res.data.url);
                /* document.getElementById("img_url").value = res.data.src;  */
                return layer.msg('上传成功');
            }
        });
    });
</script>
</body>
</html>
